<template>
  <div id="title" style="position: relative">
    <h1 class="title">
      <slot name="title"></slot>
    </h1>
    <h3 class="subtitle" :style="{ color: subcolor }">
      <slot name="subtitle"></slot>
    </h3>
  </div>
</template>

<script>
export default {
  props: {
    subcolor: String,
  },
};
</script>

<style lang="less" scoped>
#title {
  position: relative;
  z-index: 0;
  .title {
    font-family: "hanbiao";
    position: relative;
    top: 30px;
    font-size: 40px;
    line-height: 100%;

    &::before {
      content: "";
      display: block;
      position: absolute;
      z-index: -1;
      top: 10px;
      width: 1.6em;
      height: 0.4em;
      background-color: #ff701a;
    }
  }
  .subtitle {
    font-family: "hanbiao";
    position: absolute;
    z-index: -2;
    top: -24px;
    left: 0;
    white-space: nowrap;
    // color: #efefef;
    font-size: 80px;
    font-weight: bold;
    user-select: none;
  }
}
</style>